<%--
  Created by IntelliJ IDEA.
  User: frank
  Date: 16-7-20
  Time: 上午10:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="/WEB-INF/tld/c.tld" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <%@ include file="/include/tasklibs.jsp" %>
    <script src="${cxp}/js/bootstrap.min.js?v=3.3.6"></script>
    <style>
        #taskListTable th {
            border: 0;
        }

        .btn-default {
            background-color: #2F4050;
        }

        #taskListTable .th-inner {
            background-color: #DBE1E6;
            text-align: center;
            font-size: 16px;
            color: #333333;
            font-weight: normal;
            padding: 17px 0;
        }

        .circle {
            width: 40px;
            height: 40px;
            line-height: 40px;
            background-color: #2F4050;
            color: #FFF;
            border-radius: 50px;
            text-align: center;
            float: left;
            margin-right: 30px;
        }

        .info {
            float: left;
            color: #999999;
            font-size: 14px;
        }

        .info .name {
            font-size: 18px;
            color: #333333;
            font-weight: bold;
        }

        .info .code {
            margin: 10px 0;
        }

        #taskListTable td:first-child {
            padding: 0 !important;
        }

        .infoContainer {
            height: 140px;
            padding: 30px 0 40px 20px;
        }

        .operate {
            color: #999;
            cursor: pointer;
        }

        .tableContainer {
            background-color: #FFF;
            padding:;
        }

        .searchCondition {
            padding: 30px 0 24px;
        }

        .form-inline label {
            padding: 0 10px;
        }

        .form-group {
            margin-right: 30px;
        }
    </style>
</head>
<body>
<div class="tableContainer">
    <form role="form" class="form-inline searchCondition">
        <div class="form-group">
            <label for="" class="">任务</label>
            <input type="text" placeholder="请输入任务名称" id="queryName" class="form-control">
        </div>
        <div class="form-group">
            <label for="" class="">执行状态</label>
            <select class="form-control" name="account" id="queryType">
                <option value="">请选择</option>
                <option value="SAVE">已保存</option>
                <option value="PUBLISH">已发布</option>
                <option value="DOING">进行中</option>
                <option value="END">已结束</option>
                <option value="CLOSE">已关闭</option>
            </select>
        </div>
        <div class="form-group">
            <label for="exampleInputPassword2" class="">执行周期</label>
            <input id="startDate" class="laydate-icon form-control layer-date form-control" placeholder="请选择开始时间">
            <span>~</span>
            <input id="endDate" class="laydate-icon form-control layer-date form-control" placeholder="请选择结束时间">
        </div>
        <div class="form-group">
            <%--<button class="btn btn-default" id="searchBtn">搜索</button>--%>
            <a class="btn btn-default" href="#" id="searchBtn" role="button">搜索</a>
        </div>
    </form>
    <table id="taskListTable"></table>

</div>
<script>
    var Controller = {
        initLaydate: function () {
            laydate({
                elem: '#startDate'
            });
            laydate({
                elem: '#endDate'
            });
        },
        initTable: function () {
            $('#taskListTable').bootstrapTable({
                url: "web/findParentTaskPage.json",
                pagination: true,
                pageNumber: 1,
                pageSize: 10,
                sidePagination: "server",
                pageList: [10, 25, 50, 100],
                columns: [
                    {
                        field: 'name',
                        title: '任务名称'
                    },
                    {
                        field: 'status',
                        title: '执行状态'
                    },
                    {
                        field: 'time',
                        title: '执行周期'
                    },
                    {
                        field: 'mun',
                        title: '门店数量'
                    },
                    {
                        field: 'all',
                        title: '总任务'
                    },
                    {
                        field: 'submit',
                        title: '已提交'
                    },
                    {
                        field: 'check',
                        title: '审核通过'
                    },
                    {
                        field: 'checkfail',
                        title: '审核未通过'
                    },
                    {
                        field: 'pickup',
                        title: '已接单'
                    },
                    {
                        field: 'operate',
                        title: '操作',
                        formatter: operateFormatter
                    }
                ]
            });

            function operateFormatter(value, row, index) {
                if (row.status === '<span class="ing">已保存</span>') {
                    console.log(row.status)
                    return [ '<div class="operate">',
                        '<span class="mainTaskManage" id=' + row.id + '>',
                        '修改',
                        '</span><br><br>',
                        '<span class="mainTaskDetail" id=' + row.id + '>',
                        '详情',
                        '</span><br><br>',
                        '<span class="status" id=' + row.id + '>',
                        '执行情况',
                        '</span><br><br>',
                        '</div>'].join('');
                } else {
                    console.log(row.status)
                    return [
                        '<div class="operate">',
                        '<span class="mainTaskDetail" id=' + row.id + '>',
                        '详情',
                        '</span><br><br>',
                        '<span class="status" id=' + row.id + '>',
                        '执行情况',
                        '</span><br><br>',
                        '</div>'
                    ].join('');
                }
            }
        },
        init: function () {
            Controller.initTable();
            Controller.initLaydate();
        },
        bindEvents: function () {
            $(document).on("click", ".mainTaskManage", function () {
                $(document).off("click", ".status");
                $(document).off("click", ".mainTaskDetail");
                $(document).off("click", ".mainTaskManage");
                $('.J_iframe').load('web/mainTaskManage.html?id=' + $(this).attr("id"));
            })
            $(document).on("click", ".mainTaskDetail", function () {
                $(document).off("click", ".status");
                $(document).off("click", ".mainTaskDetail");
                $(document).off("click", ".mainTaskManage");
                $('.J_iframe').load('web/mainTaskDetail.html?id=' + $(this).attr("id"));
            })
            $(document).on("click", ".status", function () {
                $(document).off("click", ".status");
                $(document).off("click", ".mainTaskDetail");
                $(document).off("click", ".mainTaskManage");
                $('.J_iframe').load('web/mainTaskProgress.html?id=' + $(this).attr("id"));
            })

            $("#searchBtn").click(function () {
                $('#taskListTable').bootstrapTable('refresh',
                        {query: {search_LIKE_taskName: $("#queryName").val(),
                            search_EQ_status: $("#queryType").val(),
                            search_GTE_startTime: $("#startDate").val(),
                            search_LTE_endTime: $("#endDate").val(),
                            offset:0}});
            });
        }
    }
    $(function () {
        Controller.init();
        Controller.bindEvents();
    });
</script>
</body>
</html>
